<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与隐藏</title>
    <script src="../lib/jquery-3.4.1.js"></script>
</head>
<body>

<h2>显示与隐藏</h2>
<div id="div1" style="background: orange;width: 300px;height: 200px"></div>
<button id="b1">隐藏</button><br>
<button id="b2">显示</button><br>
<button id="b3">切换显隐性</button><br>

<script>

    $("#b1").click(function () {

        $("#div1").hide(1000);
    })

    $("#b2").click(function () {

        $("#div1").show(1000);
    })

    $("#b3").click(function () {

        $("#div1").toggle(1000);

    })

</script>

</body>
</html>